<template>
    <div v-if="activedConfig === 'counter'">
        <VueDragResize
            v-for="zone in zones"
            :key="zone.key"
            v-if="activedZone === zone.key"
            :style="areaStyle"
            class="area-zone"
            :w="counter[zone.key].w"
            :h="counter[zone.key].h"
            :x="counter[zone.key].x"
            :y="counter[zone.key].y"
            :isActive="activedZone === zone.key"
            :parentW="parentW"
            :parentH="parentH"
            :minw="10"
            :minh="10"
            :isDraggable="true"
            :isResizable="true"
            :parentLimitation="true"
            v-on:activated="activateEv"
            v-on:deactivated="deactivateEv"
            v-on:dragging="changePosition"
            v-on:resizing="changeSize"
        >{{ zone.name }}</VueDragResize>
    </div>
</template>
<script>
/**
 * 固定物品
 */
import Vue from 'vue'
import VueDragResize from 'vue-drag-resize'
import { mapState } from 'vuex'
import { zones } from '../data/consts'

export default {
    name: 'area-zone',
    props: ['parentW', 'parentH'],
    components: { VueDragResize },
    data: () => ({ zones }),
    computed: {
        ...mapState('course', ['activedConfig', 'activedZone', 'counter']),
        areaStyle() {
            if (this.counter[this.activedZone].rotate) {
                return {
                    transform: `rotate(${this.counter[this.activedZone].rotate}deg)`
                }
            }
        }
    },
    methods: {
        itemDrop(item) {
            this.$emit('itemDrop', item)
        },
        itemClick(item) {
            this.$emit('itemClick', item)
        },
        activateEv(index) {},

        deactivateEv(index) {},

        changePosition(rect) {
            const { top, left } = rect
            const area = { ...this.counter[this.activedZone], x: left, y: top }
            this.$store.commit('course/updateCounterZones', {
                key: this.activedZone,
                value: area
            })
        },

        changeSize(rect) {
            const { width, height } = rect
            const area = { ...this.counter[this.activedZone], w: width, h: height }
            this.$store.commit('course/updateCounterZones', {
                key: this.activedZone,
                value: area
            })
        }
    }
}
</script>
<style lang="less">
.area-zone {
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 4000 !important;
    background-color: #fff;
    font-size: 2.5vw;
    color: gray;
    opacity: 0.85;
}
</style>


